<template>
    <div class="goods-container">
        <div class="goods-left">
            <van-sidebar v-model="activeKey">
                <!-- v-for="item in goodsList"
            :key="item.name" -->
                <van-sidebar-item
                    v-for="(item, index) in x_goodsData"
                    :key="item.name"
                    :title="item.name"
                    @click="clcikLeft(index)"
                />
            </van-sidebar>
        </div>
        <div class="goods-right">
            <!-- 想要初始化为better-scroll优化后的滚动面板，其下只能有一个根节点 -->
            <div>
                <div
                    v-for="(item, index) in x_goodsData"
                    :key="item.name + 'right'"
                    :id="index"
                >
                    <div class="goods-right-name">&emsp;{{ item.name }}</div>
                    <van-card
                        v-for="child in item.foods"
                        :key="child.id"
                        origin-price="998.00"
                        :price="child.price"
                        :desc="child.goodsDesc"
                        :title="child.name"
                        :thumb="child.imgUrl"
                        @click-thumb="clickChild(child)"
                    >
                        <template #tags>
                            <van-tag plain type="danger">{{
                                child.category
                            }}</van-tag>
                        </template>
                        <template #footer>
                            <button
                                id="minus"
                                v-show="child.num > 0"
                                @click="
                                    $store.commit('addNum', {
                                        id: child.id,
                                        num: -1,
                                    })
                                "
                            >
                                -
                            </button>
                            <label id="text" v-show="child.num > 0">{{
                                child.num
                            }}</label>
                            <button
                                id="append"
                                @click="
                                    $store.commit('addNum', {
                                        id: child.id,
                                        num: 1,
                                    })
                                "
                            >
                                +
                            </button>
                        </template>
                    </van-card>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { $_goodsList } from "@/apis/goods";
import BScroll from "better-scroll";
import { IgoodsList, IgoodsArrObj } from "@/interface/goodsinterface";

@Component
export default class Goods extends Vue {
    activeKey: number = 0;
    // goodsListData: IgoodsList = {};
    goodsListDataArr: Array<IgoodsList> = [];
    scroll: any;

    //vuex的共享大数据
    get x_goodsData(): void {
        return this.$store.state.goodsData;
    }

    mounted(): void {
        let wrapper: any = document.querySelector(".goods-right");
        // 初始化右侧为滚动面板
        this.scroll = new BScroll(wrapper, { click: true, probeType: 3 });
        // 绑定事件需要使用.on() , 如果是scroll事件，还需要额外开启probeType: 3属性，才能实时派发滚动事件
        this.scroll.on("scroll", (pos: any) => {
            //pos.y为负数,我们转为绝对值正数
            let _y: number = Math.abs(pos.y);
            // console.log(_y);

            for (let obj of this.domheight) {
                //从算法返回的坐标对象中进行匹配，设置左侧的索引
                if (_y >= obj.min && _y < obj.max) {
                    this.activeKey = obj.index;
                }
            }
        });
        // 1. 兼容性，如果浏览器不支持H5新特性，无法使用选择器
        // 2. querySelector系列无法支持特殊字符及数字作为选择器
        // HTML5 -> document.querySelector() document.querySelectorAll()
    }

    get domheight(): Array<any> {
        let arr: Array<any> = [];
        //第一次的高度结果，不能直接用
        //  [144, 293, 80, 336, 400, 208, 442, 464, 656, 208]
        //第二次数据加工
        //  [{min: 0, max: 144, index: 0},
        // {min: 144, max: 144+293, index: 1},
        // {min: 144+293, max: min+自己的高度, index: 2},
        // {min: 0, max: 144, index: 0}]
        // min: 之前div高度的总和, max: 总和+我的高度, index: 自增
        let total: number = 0;

        this.goodsListDataArr.forEach((item, i) => {
            // 每个种类的高度
            let curheight: any = document.getElementById(i + "")?.offsetHeight;
            arr.push({ min: total, max: total + curheight, index: i });
            total += curheight;
        });

        return arr;
    }
    clcikLeft(i: number): void {
        // i+'',转成字符串
        this.scroll.scrollToElement(document.getElementById(i + ""), 600);
    }

    clickChild(child: IgoodsArrObj): void {
        this.$router.push({ path: "/detail", query: child });
    }

    async created(): Promise<void> {
        //如果本地存储有vuex数据，则用本地存储
        if (sessionStorage.vuexdata && sessionStorage.vuexdata.length != 0) {
            //把本地存储的值初始化到state中
            this.$store.commit("initvuexstate", sessionStorage.vuexdata);
        } else {
            let res = await $_goodsList();
            // console.log(res);
            let { goodsList } = res;

            // goodsList = this.goodsListDataArr //错误写法
            // this.goodsListDataArr = goodsList; //正确写法
            // console.log(this.goodsListDataArr);
            this.$store.commit("getGoodsData", goodsList);
            // for(let obj of this.goodsListDataArr){
            //     for(let child of obj.foods){
            //         child.imgUrl = child.imgUrl?.replace('127.0.0.1','192.168.43.221')
            //         // child.imgUrl = child.imgUrl?.replace('127.0.0.1','192.168.0.100')
            //     }
            // }
        }
    }
}
</script>

<style scoped lang="scss">
.van-card__header {
    width: 75%;
    .van-card__title {
        width: 135%;
    }
    .van-card__desc{
        width: 135%;
    }
}
.van-card__footer {
    display: flex;
}
#minus {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    border: 2px solid #aaaaaa;
    background: #fff;
    font-size: 20px;
}
#text {
    font-size: 20px;
    margin: 0 10px;
}
#append {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #ffc300;
    font-size: 20px;
}
.goods-container {
    display: flex;
    .goods-left {
        overflow: scroll;
        width: 80px;
        height: 100%;
        .van-sidebar-item--select::before {
            background: rgb(255, 195, 0);
        }
    }
    .goods-left::-webkit-scrollbar,
    .goods-right::-webkit-scrollbar {
        display: none;
    }
    .goods-right {
        overflow: scroll;
        flex: 1;
        .goods-right-name {
            position: relative;
            background: #f4f4f4;
            color: #878787;
            line-height: 33px;
            &::before {
                content: "";
                position: absolute;
                height: 100%;
                width: 7px;
                background: #dddddd;
            }
        }
        .van-card {
            margin-top: 0;
            display: flex;
            justify-content: space-between;
            background: #fff;
            .van-card__price {
                color: #f64114;
            }
            .van-card__footer {
                align-self: flex-end;
                .van-button {
                    width: 87%;
                    border-radius: 50%;
                    background: #ffc300;
                    border: 0;
                    .van-button__content {
                        color: #000;
                        font-size: 28px;
                    }
                }
            }
        }
    }
}
</style>